<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="${layout} :: common_header(~{::title})">
    <title th:text="${pageTitle}">ContactUs</title>
</head>

<body th:replace="${layout} :: common_body(~{::div.content-wraper})">

<div class="content-wraper detail-wrap">

    <div class="container">
        <div class="product-detail-wrap">
            <div class="title" th:if="${language.equals('en')}">Product details</div>
            <!-- pc端 -->
            <div class="product-detail-box pc-detail">
                <div class="product-img-box">
                    <img th:src="${product.getIndexImg()}" class="img" alt="">
                </div>
                <div class="right">
                    <div class="goods-name">
                        <span th:text="${productTitle}">name of commodity</span>
                        <p th:text="${product.productNumber}">Item number：OBLW11192A044-1012</p>
                    </div>
                    <div class="goods-desc" th:utext="${productDesc}">
                        <p>Clothing technology: others</p>
                        <p>Pattern: solid</p>
                        <p>Brand: dongfangfuhao</p>
                        <p>Launch season: Fall 2015</p>
                        <p>Material composition: viscose (viscose) 25%</p>
                        <p>other 75%</p>
                        <p>rticle No.: 02</p>
                    </div>
                    <div class="goods-small-img">
                        <img th:each="img:${product.images}" th:src="${img.getUrl()}" alt="">

                    </div>


                </div>
            </div>
            <!-- 移动端 -->
            <div class="product-detail-box phone-detail">
                <div class="swiper-container product-detail-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:each="img:${product.images}">
                            <img th:src="${img.getUrl()}" class="showPreImg">
                        </div>

                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="right">
                    <div class="goods-name">
                        <span th:text="${productTitle}">name of commodity</span>
                        <p th:text="${product.productNumber}">Item number：OBLW11192A044-1012</p>
                    </div>
                    <div class="goods-desc" th:utext="${productDesc}">
                        <p>Clothing technology: others</p>
                        <p>Pattern: solid</p>
                        <p>Brand: dongfangfuhao</p>
                        <p>Launch season: Fall 2015</p>
                        <p>Material composition: viscose (viscose) 25%</p>
                        <p>other 75%</p>
                        <p>rticle No.: 02</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="product-detail-wrap">
            <div class="title" th:if="${language.equals('en')}">Graphic details</div>
            <div class="title" th:if="${language.equals('zh')}">产品详情</div>
            <div class="graphic-detail-box">
                <p th:each="img:${product.detailImages}">
                    <img  th:src="${img.getUrl()}" alt="">
                </p>
            </div>


        </div>
    </div>

    <script type="text/javascript">
        // 详情读取
        // $('.graphic-detail-box').append(`<p>
        //             <img src="./images/product01.png" alt="">
        //     </p>`)
        // pc端
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            clickable: true,
            slidesPerView: 1,
            centeredSlides: true,
            paginationClickable: true,
            loop:true
        });
    </script>

</div>


</body>

</html>